<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href="./style.css" rel="stylesheet" />
  </head>

  <body>
    <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
    <script type="importmap">
      {
        "imports": {
          "vue": "https://unpkg.com/vue@3.2.31/dist/vue.esm-browser.js"
        }
      }
    </script>

    <!--
An example of creating a reusable grid component and using it with external data.
-->

    <script type="module">
      import DemoGrid from "./Grid.js";
      import { createApp, ref } from "vue";

      createApp({
        components: {
          DemoGrid,
        },
        setup() {
          const searchQuery = ref("");
          const gridColumns = ["name", "power"];
          const gridData = [
            { name: "Chuck Norris", power: Infinity },
            { name: "Bruce Lee", power: 9000 },
            { name: "Jackie Chan", power: 7000 },
            { name: "Jet Li", power: 8000 },
          ];

          return {
            searchQuery,
            gridColumns,
            gridData,
          };
        },
      }).mount("#app");
    </script>

    <div id="app">
      <form id="search">Search <input name="query" v-model="searchQuery" /></form>
      <demo-grid :data="gridData" :columns="gridColumns" :filter-key="searchQuery"> </demo-grid>
    </div>
  </body>
</html>
